<template>
  <div>
    <div class="hotop">
      <div class="hotopct"></div>
      <p>更新日期：11月12日</p>
    </div>
    <!--    排行榜的组件-->
        <NewMusic :newMusicList="newMusicList" :isshow="true"/>
    <div style="height: 100px"></div>
  </div>
</template>

<script>

import NewMusic from "../../../components/NewMusic";
import {getDetailSong, getHotSongList} from "@/api/index-api";

export default {
  name: "list",
  components: {
    NewMusic,
  },
  data() {
    return {
      newMusicList: null
    }
  },
  created() {
    // getNewMusic(20).then((res) => {
    //   console.log(res)
    //   if (res.code === 200) {
    //     this.newMusicList = res.result
    //   }
    // })
    getHotSongList().then((res) => {
      // console.log(res.playlist.trackIds)
      if (res.code === 200) {
        let songList = []
        res.playlist.trackIds.forEach(item => {
              if (songList.length < 30) {
                songList.push(item.id)
              }
            }
        )
        // console.log(songList.toString())
        getDetailSong(songList.toString()).then(r => {
          // console.log(r)
          this.newMusicList = r.songs
          // console.log(this.newMusicList)
        })
      }
    })
  }
}

</script>

<style scoped lang="less">
.hotop {
  border-top: 1px solid #dddddd;
  height: 150px;
  background: url("../../../../public/img/hot_music_bg_2x.jpg");

  .hotopct {
    width: 137px;
    height: 73px;
    background: url("../../../../public/img/index_icon_2x.png");
    background-size: 160px 100px;
    background-position: -23px -27px;
    margin-top: 20px;
    margin-left: 30px;
  }

  p {
    margin-left: 30px;
    font-size: 12px;
    color: #fff;
  }
}
</style>